$(document).ready(function(){ // ready start
    
    // *****  flex end  *****
// flex-direction
$("input[type='radio'][name='flex-direction']").change(function() {
    // window.alert($("input[type='radio'][name='flex-direction']:checked").val())
    $this = $(this);
    $('div[class="flex-box"]').css({
        'flex-direction': $("input[type='radio'][name='flex-direction']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css("background-color","red")
});
// flex-wrap
$("input[type='radio'][name='flex-wrap']").change(function() {
    // window.alert($("input[type='radio'][name='flex-wrap']:checked").val())
    $this = $(this);
    $('div[class="flex-box"]').css({
        'flex-wrap': $("input[type='radio'][name='flex-wrap']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })
    // $('div[class="flex-item"]:nth-child(2)').html("flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;");
});

// justify-content
$("input[type='radio'][name='justify-content']").change(function() {
    // window.alert($("input[type='radio'][name='justify-content']:checked").val());
    $this = $(this);
    $('div[class="flex-box"]').css({
        'justify-content': $("input[type='radio'][name='justify-content']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })
});

// align-items
$("input[type='radio'][name='align-items']").change(function() {
    // window.alert($("input[type='radio'][name='align-items']:checked").val());
    $this = $(this);
    $('div[class="flex-box"]').css({
        'align-items': $("input[type='radio'][name='align-items']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })
});

// align-content
$("input[type='radio'][name='align-content']").change(function() {
    // window.alert($("input[type='radio'][name='align-items']:checked").val());
    $this = $(this);
    $('div[class="flex-box"]').css({
        'align-content': $("input[type='radio'][name='align-content']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })
});

// *****   flex-item   *****
// order
$("input[type='radio'][name='order']").change(function() {
    // window.alert($("input[type='radio'][name='order']:checked").val());
    $this = $(this);
    $('div[class="flex-item"]:nth-child(2)').css({
        'order': $("input[type='radio'][name='order']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })
});


// flex-grow
$("input[type='radio'][name='flex-grow']").change(function() {
    // window.alert($("input[type='radio'][name='flex-grow']:checked").val());
    $this = $(this);
    $('div[class="flex-item"]:nth-child(2)').css({
        'flex-grow': $("input[type='radio'][name='flex-grow']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })

    $('div[class="flex-item"]:gt(6)').css({
        'flex-grow': $("input[type='radio'][name='flex-grow']:checked").val(),
    });
    $('div[class="flex-item"]:gt(6)').css({
        "background-color":"yellow",
    })
});

    // flex-shrink
$("input[type='radio'][name='flex-shrink']").change(function() {
    // window.alert($("input[type='radio'][name='flex-shrink']:checked").val());
    $this = $(this);
    $('div[class="flex-item"]:nth-child(2)').css({
        'flex-shrink': $("input[type='radio'][name='flex-shrink']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })

    $('div[class="flex-item"]:gt(6)').css({
        'flex-shrink': $("input[type='radio'][name='flex-shrink']:checked").val(),
    });
    $('div[class="flex-item"]:gt(6)').css({
        "background-color":"yellow",
    })
});


    // flex-basis
    $("input[type='radio'][name='flex-basis']").change(function() {
        // window.alert($("input[type='radio'][name='flex-basis']:checked").val());
        $this = $(this);
        $('div[class="flex-item"]:nth-child(2)').css({
            'flex-basis': $("input[type='radio'][name='flex-basis']:checked").val(),
        });
        $('div[class="flex-item"]:nth-child(2)').css({
            "background-color":"red",
        })
    
        $('div[class="flex-item"]:gt(6)').css({
            'flex-basis': $("input[type='radio'][name='flex-basis']:checked").val(),
        });
        $('div[class="flex-item"]:gt(6)').css({
            "background-color":"yellow",
        })
    });

// align-self
$("input[type='radio'][name='align-self']").change(function() {
    // window.alert($("input[type='radio'][name='align-self']:checked").val());
    $this = $(this);
    $('div[class="flex-item"]:nth-child(2)').css({
        'align-self': $("input[type='radio'][name='align-self']:checked").val(),
    });
    $('div[class="flex-item"]:nth-child(2)').css({
        "background-color":"red",
    })
});


    // *****  flex end  *****


}); // ready end